<template>
  <div class="form1">
    <div class="numDiv">
      <div class="numitem">
        <h3>{{ data[0].name }}</h3>
        <h1>{{ data[0].value }}</h1>
      </div>
      <div class="numitem">
        <h3>{{ data[1].name }}</h3>
        <h1>{{ data[1].value }}</h1>
      </div>
      <div class="numitem">
        <h3>{{ data[2].name }}</h3>
        <h1>{{ data[2].value }}</h1>
      </div>
    </div>
    <div class="numDiv">
      <div class="numitem">
        <h3>{{ data[3].name }}</h3>
        <h1>{{ data[3].value }}</h1>
      </div>
      <div class="numitem">
        <h3>{{ data[4].name }}</h3>
        <h1>{{ data[4].value }}%</h1>
      </div>
      <div class="numitem">
        <h3>{{ data[5].name }}</h3>
        <h1>{{ data[5].value }}</h1>
      </div>
    </div>
    <div class="numDiv">
      <div class="numitem">
        <h3>{{ data[6].name }}</h3>
        <h1>{{ data[6].value }}</h1>
      </div>
      <div class="numitem">
        <h3>{{ data[7].name }}</h3>
        <h1>{{ data[7].value }}</h1>
      </div>
      <div class="numitem">
        <h3>{{ data[8].name }}</h3>
        <h1>{{ data[8].value }}</h1>
      </div>
    </div>
  </div>
</template>

<script>
import { TodayAndConductResult } from '@/api/modular/main/bigScreen/bigScreenManage'
  export default {
    data() {
      return {
          data: [
            {
              name: '在制工单数量',
              value: 167
            },
            {
              name: '延期工单数',
              value: 167
            },
            {
              name: '在制任务数',
              value: 67
            },
            {
              name: '延期任务数',
              value: 123
            },
            {
              name: '今日不良品率',
              value: 55
            },
            {
              name: '今日完成工单',
              value: 98
            },
            {
              name: '今日产出工单',
              value: 98
            },
            {
              name: '今日完成任务',
              value: 55
            },
            {
              name: '在制任务计划数',
              value: 55
            },
            {
              name: '在制工单计划数',
              value: 55
            }
          ],
          unit: '单位'
      }
    },
    created() {
      TodayAndConductResult().then((res) => {
        this.data[0].value = res.data.conductWorkOrderCount
        this.data[1].value = res.data.delayWorkOrderCount
        this.data[2].value = res.data.conductTaskCount
        this.data[3].value = res.data.delayTaskCount
        this.data[4].value = res.data.rejectsRate
        this.data[5].value = res.data.workOrderFinishNum
        this.data[6].value = res.data.workOrderProNum
        this.data[7].value = res.data.taskFinishCount
        this.data[8].value = res.data.taskPalNum
        this.data[9].value = res.data.workOrderPalNum
      })
      .catch((error) => {
        console.log(error)
      })
    }
  }
</script>

<style lang="less" scoped>
.form1 {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  color: white;
  .numDiv {
    width: 100%;
    height: 30%;
    display: flex;
    flex-flow: row, nowrap;
    .numitem {
      background-color: rgba(19, 25, 47, 0.6);
      width: 31%;
      flex-grow: 1;
      flex-shrink: 1;
      margin: 3px;
      color: #fff;
      font-size: 12px;
      text-align: left;
      padding: 5px;
      h3 {
        color: #257dff !important;
        font-size: 12px;
      }
      h1 {
        color: green;
        font-size: 20px;
      }
    }
  }
}
</style>
